<template>
  <div>

    <div id="qs">
      <div id="left">
        <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
        <el-button type="primary">删除</el-button>
        <el-button type="primary">编辑</el-button>
        <el-button type="primary">查看</el-button>
      </div>
      <div id="right">
        <el-form :inline="true"  class="demo-form-inline">
          <el-form-item label=" 单据状态">
            <el-select v-model="query.bill_status">
              <el-option
                v-for="item in bill_status_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input type="text">
              <el-button slot="append" icon="el-icon-search"  v-model="query.search_text"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div>
      <el-table
        :data="list"
        style="width: 100%"
        :default-sort = "{prop: 'date', order: 'descending'}"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="status"
          label="单据状态"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="debt_unit"
          label="债务单位">
        </el-table-column>
        <el-table-column
          prop="debt_subject_unit"
          label="债务主体单位">
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pagination.pageSize"
      :current-page="pagination.page"
      :total="pagination.total"
      @current-change="changePage">
    </el-pagination>

    <el-dialog :title="optTitle" :visible.sync="dialogFormVisible" :width="dialogWidth">
      <el-form :model="form" ref="form" :inline="true"  class="demo-form-inline" :rules="rules">
        <el-row>
          <el-col :span="8">
            <el-form-item label="单据编号" :label-width="formLabelWidth" prop="bill_no">
              <el-input size="small" v-model="form.bill_no"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="债务单位" :label-width="formLabelWidth" prop="debt_unit">
              <el-input size="small" v-model="form.debt_unit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="债务主体单位" :label-width="formLabelWidth" prop="debt_subject_unit">
              <el-input size="small" v-model="form.debt_subject_unit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="债务名称" :label-width="formLabelWidth" prop="debt_name">
              <el-input size="small" v-model="form.debt_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="债务类型" :label-width="formLabelWidth" prop="debt_type">
              <el-select  size="small" v-model="form.debt_type" :value="form.debt_type">
                <el-option
                  v-for="item in debt_type_list"
                  :key="item.item_code"
                  :label="item.item_name"
                  :value="item.item_code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="债权人" :label-width="formLabelWidth" prop="creditor">
              <el-input  size="small" v-model="form.creditor"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="债务金额" :label-width="formLabelWidth" prop="debt_amount">
              <el-input  size="small" v-model="form.debt_amount" maxLength="10"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="融资方式" :label-width="formLabelWidth" prop="financing_mode">
              <el-select size="small" v-model="form.financing_mode" :value="form.financing_mode">
                <el-option
                  v-for="item in financing_mode_list"
                  :key="item.item_code"
                  :label="item.item_name"
                  :value="item.item_code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="融资类型" :label-width="formLabelWidth" prop="financing_type">
              <el-select  size="small" v-model="form.financing_type" :value="form.financing_type">
                <el-option
                  v-for="item in financing_type_list"
                  :key="item.item_code"
                  :label="item.item_name"
                  :value="item.item_code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="融资利率" :label-width="formLabelWidth" prop="financing_rate">
              <el-input  size="small" v-model="form.financing_rate"  maxLength="8"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="融资开始日期" :label-width="formLabelWidth" prop="financing_start_time">
              <el-date-picker
                v-model="form.financing_start_time"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="融资结束日期" :label-width="formLabelWidth" prop="financing_end_time">
              <el-date-picker
                v-model="form.financing_end_time"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="债务用途" :label-width="formLabelWidth" prop="debt_use">
              <el-select  size="small" v-model="form.debt_use">
                <el-option
                  v-for="item in debt_use_list"
                  :key="item.item_code"
                  :label="item.item_name"
                  :value="item.item_code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经理层审核" :label-width="formLabelWidth" prop="manager_audit">
              <el-select size="small" v-model="form.manager_audit" :value="form.manager_audit">
                <el-option
                  v-for="item in isOrNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="董事会决策" :label-width="formLabelWidth" prop="board_decision_making">
              <el-select  size="small" v-model="form.board_decision_making" :value="form.board_decision_making">
                <el-option
                  v-for="item in isOrNo"
                  :key="item.value"
                  :label="item.label"
                   :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="出资人批准" :label-width="formLabelWidth" prop="investor_approval">
              <el-select  size="small" v-model="form.investor_approval" :value="form.investor_approval">
                <el-option
                  v-for="item in isOrNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="担保方式" :label-width="formLabelWidth" prop="guarantee_mode">
              <el-select  size="small" v-model="form.guarantee_mode" :value="form.guarantee_mode">
                <el-option
                  v-for="item in guarantee_mode_list"
                  :key="item.item_code"
                  :label="item.item_name"
                  :value="item.item_code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="当期本金" :label-width="formLabelWidth" prop="current_principal_amount">
              <el-input type="text" size="small" v-model="form.current_principal_amount" maxLength="10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBill" >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {mapMutations} from 'vuex'
import {MODULE_MAIN} from '../store/modules'
import {MUTATION_TYPE_ADDBILL, MUTATION_TYPE_QUERYDDWLIST, MUTATION_TYPE_QUERYBILLLIST} from '../store/main'

export default {
  data: function () {
    let validateDouble = (rule, value, callback) => {
      if (value === null || value === '') {
        callback()
      } else {
        if (!/^\d+(\.\d+)?$/.test(value)) {
          callback(rule.message)
        }
        callback()
      }
    }

    return {
      debt_type_list: [],
      financing_mode_list: [],
      financing_type_list: [],
      debt_use_list: [],
      guarantee_mode_list: [],
      dialogFormVisible: true,
      formLabelWidth: '110px',
      dialogWidth: '1100px',
      list: [],
      pagination: {
        page: 1,
        maxPage: 1
      },
      optTitle: '新增',
      query: {
        bill_status: null,
        search_name: null
      },
      bill_status_list: [
        {label: '未提交', value: 0},
        {label: '已提交', value: 1},
        {label: '已审核', value: 2}
      ],
      form: {
        bill_no: null,
        debt_unit: null,
        debt_subject_unit: null,
        debt_name: null,
        debt_type: null,
        debt_type_name: null,
        creditor: null,
        debt_amount: null,
        financing_mode: null,
        financing_type: null,
        financing_rate: null,
        financing_start_time: null,
        financing_end_time: null,
        debt_use: null,
        guarantee_mode: null,
        current_principal_amount: null,
        manager_audit: 1,
        board_decision_making: 1,
        investor_approval: 1
      },
      isOrNo: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 0,
          label: '否'
        }
      ],
      rules: {
        bill_no: [
          {required: true, message: '请输入单据编号', trigger: 'blur'},
          {min: 8, max: 12, message: '长度在 8 到 12 个字符', trigger: 'blur'}
        ],
        debt_unit: [
          {required: true, message: '请输入债务单位', trigger: 'blur'},
          {min: 8, max: 30, message: '长度在 8 到 30 个字符', trigger: 'blur'}
        ],
        debt_subject_unit: [
          {required: true, message: '请输入债务主体单位', trigger: 'blur'},
          {min: 8, max: 30, message: '长度在 8 到 30 个字符', trigger: 'blur'}
        ],
        debt_name: [
          {required: true, message: '请输入债务名称', trigger: 'blur'},
          {min: 8, max: 30, message: '长度在 8 到 30 个字符', trigger: 'blur'}
        ],
        debt_type: [
          {required: true, message: '请选择债务类型', trigger: 'change'}
        ],
        creditor: [
          {required: true, message: '请输入债权人', trigger: 'blur'}
        ],
        debt_amount: [
          {required: true, message: '请输入债务金额', trigger: 'blur'},
          {validator: validateDouble, message: '请输入数字', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ],
        financing_mode: [
          {required: true, message: '请选择融资方式', trigger: 'change'}
        ],
        financing_type: [
          {required: true, message: '请选择融资类型', trigger: 'change'}
        ],
        financing_rate: [
          {required: true, message: '请输入融资利率', trigger: 'blur'},
          {validator: validateDouble, message: '请输入数字', trigger: 'blur'},
          {min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur'}
        ],
        financing_start_time: [
          {required: true, message: '请选择融资开始日期', trigger: 'blur'}
        ],
        financing_end_time: [
          {required: true, message: '请选择融资结束日期', trigger: 'blur'}
        ],
        debt_use: [
          {required: true, message: '请选择债务用途', trigger: 'change'}
        ],
        current_principal_amount: [
          {validator: validateDouble, message: '请输入数字', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    changePage: function (page) {
      const that = this

      this.queryBillList({
        payload: {page: page},
        callback: function (response) {
          if (response && response.status === 200) {
            const {code, data} = response.data

            if (code === '0') {
              that.list = data.list
              that.pagination = data.pagination
            }
          }
        }
      })
    },
    saveBill: function () {
      const that = this

      this.$refs['form'].validate((valid) => {
        console.log(valid)

        if (valid) {
          this.addBill({
            payload: this.form,
            callback: function (response) {
              if (response && response.status === 200) {
                const {code, msg} = response.data
                that.dialogFormVisible = false
                if (code && code === '0') {
                  that.$message.success(msg)
                } else {
                  that.$message.error(msg)
                }
              }
            }
          })
        } else {
          return false
        }
      })
    },
    ...mapMutations(MODULE_MAIN, {
      addBill: MUTATION_TYPE_ADDBILL,
      queryDDWList: MUTATION_TYPE_QUERYDDWLIST,
      queryBillList: MUTATION_TYPE_QUERYBILLLIST
    })
  },
  computed: {

  },
  mounted: function () {
    const that = this

    this.queryBillList({
      payload: {},
      callback: function (response) {
        if (response && response.status === 200) {
          const {code, data} = response.data

          if (code === '0') {
            that.list = data.list
            that.pagination = data.pagination
          }
        }
      }
    })

    this.queryDDWList({
      callback: function (response) {
        if (response && response.status === 200) {
          const {code, data} = response.data

          if (code === '0') {
            that.debt_type_list = data.debt_type_list
            that.financing_mode_list = data.financing_mode_list
            that.financing_type_list = data.financing_type_list
            that.debt_use_list = data.debt_use_list
            that.guarantee_mode_list = data.guarantee_mode_list
          }
        }
      }
    })
  }
}
</script>
<style scoped>
  #qs{
    padding: 20px;
  }
  #left{
    float: left;
  }
  #right{
    float: right;
  }
</style>
